<template>
	<el-form ref="loginForm" :model="loginFormData" :label-width="0" :rules="rules" status-icon autocomplete="off"
		class="formPanel">
		<el-form-item label="" prop="username">
			<el-input prefix-icon="Avatar" :autocomplete="false" v-model="loginFormData.username"
				placeholder="请输入用户名" />
		</el-form-item>
		<el-form-item label="" prop="password">
			<el-input type="password" autocomplete="new-password" prefix-icon="Unlock" v-model="loginFormData.password"
				placeholder="请输入密码" />
		</el-form-item>
		<div class="check-line">
			<div>
				<el-form-item label="">
					<el-checkbox v-model="loginFormData.rememberUserName" label="记住用户名" size="large" />
				</el-form-item>
			</div>
			<div class="line-item"></div>
			<div>
				<el-form-item label="">
					<el-checkbox v-model="loginFormData.rememberPassword" label="记住密码" size="large" />
				</el-form-item>
			</div>
<!--			<div class="line-item"></div>-->
<!--			<div>-->
<!--				<router-link to="/ResetPwd" class="resetPassword">找回密码</router-link>-->
<!--			</div>-->
		</div>
		<el-form-item>
			<el-button type="danger" @click="handleLogin" style="text-align: center;">登录</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import utils from '@/utils/utils'
import router from '@/router'

// const curTheme = config.curTheme
// const option = defineProps({
//   lineHeight: {
//     type: String,
// 	  required: true
//   },
//   textColor: {
//     type: String,
//     default: '#222',
//     required: false
//   }
// })
const loginFormData = reactive({
  username: '',
  password: '',
  rememberUserName: false,
  rememberPassword: false
})
const loginForm = ref()
const rules = reactive({
  username: [{
    required: true,
    message: '请输入用户名',
    trigger: 'blur'
  }],
  password: [{
    required: true,
    message: '请输入密码',
    trigger: 'blur'
  }]
})

const store = useStore()
const handleLogin = () => {
  loginForm.value.validate((valid) => {
    if (!valid) {
      return
    }
    utils.saveData('rememberUserName', loginFormData.rememberUserName)
    utils.saveData('rememberPassword', loginFormData.rememberPassword)
    utils.saveData('username', loginFormData.username)
    utils.saveData('password', loginFormData.password)
    utils.showLoadding()
    // const params = new URLSearchParams()
    // params.append('username', loginFormData.username)
    // params.append('password', loginFormData.password)
    store.dispatch('user/login', {
      username: loginFormData.username,
      password: loginFormData.password
    }).then(() => {
      utils.hideLoadding()
      router.replace({
        name: 'Index'
      })
    }).catch(err => {
      console.log(err)
      utils.hideLoadding()
    })
  })
}
</script>

<style scoped>
.formPanel:deep(.el-input__prefix-inner) {
		color: #000;
		font-size: 20px;
	}

.formPanel:deep(.el-form-item) {
		margin-bottom: 30px;
	}

.formPanel:deep(.el-checkbox__label) {
		color: v-bind(option['textColor']);
	}

.formPanel:deep(.el-form-item__error) {
		height: 3vh;
		line-height: 3vh;
	}

.formPanel:deep(.el-form-item__label) {
		line-height: v-bind(option['lineHeight']);
		height: v-bind(option['lineHeight']);
}

.svg-container {
  padding: 6px 5px 6px 15px;
  color: $dark_gray;
  vertical-align: middle;
  display: inline-block;
}

.formPanel:deep(.el-form-item__content),
.formPanel:deep(.el-input__inner) {
		line-height: v-bind(option['lineHeight']);
		height: v-bind(option['lineHeight']);
	}

.formPanel>>>input {
		background: #fff !important;
	}

.formPanel .check-line {
		display: flex;
	}

.formPanel .check-line .line-item {
		flex: 1;
	}

.formPanel>>>.el-button {
		width: 100%;
		line-height: v-bind(option['lineHeight']);
		height: v-bind(option['lineHeight']);
		border-radius: v-bind(option['lineHeight']);
	}

.formPanel .code {
		width: 110px;
		height: calc(v-bind(option['lineHeight']) + 2px);
		padding-left: 10px;
		cursor: pointer;
	}

.formPanel .resetPassword {
		line-height: v-bind(option['lineHeight']);
		height: v-bind(option['lineHeight']);
		text-decoration: none;
		color: #f44336;
		font-size: 14px;
	}
</style>
